<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				background-color: #555;
			}

			.top {
				width: 100%;
				height: 60px;
				padding-top: .1px;
			}

			.search {
				margin: 10px auto;
				position: relative;
				width: 500px;
				background-color: #17181a;
				border-radius: 6px;
				color: #fff;
				overflow: hidden;
				box-shadow: 0 0 1px -.5px #ffffff88;
			}

			.input-area {
				display: flex;
				width: 100%;
				height: 40px;
			}

			.input-area .input {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.input-area input {
				width: calc(100% - 16px);
				height: calc(100% - 10px);
				border-radius: 8px;
				outline: none;
				border: none;
				display: block;
				box-sizing: border-box;
				padding: 8px;
				color: #f8f8f8;
				color: #fff;

				background-color: transparent;
			}

			.input-area input:focus {
				background-color: #ffffff11;
			}

			.input-area .submit {
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.input-area .submit .btn {
				width: 80%;
				height: 80%;
				border-radius: 8px;
				background: url(search.svg) no-repeat center;
				background-size: 50%;
				transition: .3s;
				cursor: pointer;
				user-select: none;
			}

			.input-area .submit .btn:hover {
				background-color: #ffffff11;
			}

			input::-webkit-input-placeholder {
				color: #acacac;
			}

			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #acacac;
			}

			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #acacac;
			}

			input:-ms-input-placeholder {
				/* Internet Explorer 10-11 */
				color: #acacac;
			}
			
			.card-area {
				width: 100%;
				padding: 8px 14px;
				box-sizing: border-box;
			}
			.hide{
				display: none;
			}
			.title{
				width: 100%;
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.title .clear-btn{
				color: #737373;
				font-size: 12px;
				user-select: none;
				cursor: pointer;
			}
			.title .clear-btn:hover{
				color: #2b8fba;
			}
			.grid{
				width: 100%;
				display: flex;
				flex-flow: row wrap;
				align-content: flex-start;
				overflow: hidden;
				padding-top: 6px;
			}
			.limit{
				height: 80px;
			}
			.mini{
				position: relative;
				margin: 4px;
				font-size: 12px;
				background-color: #aaaaaa11;
				padding: 8px;
				border-radius: 6px;
				color: #ffffffcc;
				cursor: pointer;
			}
			.mini:hover{
				color: #2b8fba;
			}
			.mini .close{
				position: absolute;
				right: 0;
				top: 0;
				width: 12px;
				height: 12px;
				background-color: #888;
				border-radius: 50%;
				transform: translate(30%,-30%);
				display: none;
			}
			.mini .close::before{
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%) rotate(45deg);
				width: 8px;
				height: 1px;
				background-color: #000;
			}
			.mini .close::after{
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%) rotate(-45deg);
				width: 8px;
				height: 1px;
				background-color: #000;
			}
			.mini:hover .close{
				display: block;
			}
			.scale-btn{
				width: fit-content;
				margin: 4px auto;
				font-size: 12px;
				color: #666;
				display: flex;
				align-items: center;
				cursor: pointer;
				transition: .2s;
			}
			.scale-btn:hover{
				color: #2b8fba;
			}
			.scale-btn .icon{
				width: 10px;
				height: 10px;
				background: url(down.svg) no-repeat center;
				margin: 4px 0 0 4px;
				opacity: .5;
				transform: rotate(180deg);
			}
			.limit+.scale-btn .icon{
				transform: rotate(0);
			}
			.hot-list{
				width: 100%;
				height: 210px;
				display: flex;
				flex-flow: column wrap;
			}
			.hot-list .item{
				position: relative;
				width: 50%;
				height: 40px;
				font-size: 14px;
				color: #eee;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 14px;
				user-select: none;
				cursor: pointer;
			}
			.hot-list .item:hover{
				background-color: #ffffff22;
			}
			.hot-list span{
				margin-right: 10px;
				color: #888;
			}
			.hot-list .pre{
				color: #eee;
			}
			.hot-list .hot::after{
				content: "热";
				background-color: #f80;
				font-size: 10px;
				width: 16px;
				border-right-width: 16px;
				border-radius: 3px;
				text-align: center;
				margin-left: 6px;
				margin-top: 3px;
				transform: scale(.9);
			}
			.hot-list .new::after{
				content: "新";
				background-color: #f96787;
				font-size: 10px;
				width: 16px;
				border-right-width: 16px;
				border-radius: 3px;
				text-align: center;
				margin-left: 6px;
				margin-top: 3px;
				transform: scale(.9);
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="top">
			<div id="searchMain" class="search">
				<div class="input-area">
					<div class="input">
						<input type="text" id="search" placeholder="今天又是不做人的一天" />
					</div>
					<div class="submit">
						<div class="btn"></div>
					</div>
				</div>
				<div id="cardArea" class="card-area hide">
					<div class="title">
						<div class="title-name">搜索历史</div>
						<div class="clear-btn">清空</div>
					</div>
					<div class="grid limit">
						<div class="mini">
							<span>国王排名</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>css动画</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女御伽话</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>国王排名</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>css动画</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>国王</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>css动画</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女御伽话</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>国王排名</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>css动画</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女御伽话</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>国王排名</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>css动画</span>
							<div class="close"></div>
						</div>
						<div class="mini">
							<span>大正少女</span>
							<div class="close"></div>
						</div>
					</div>
					<div id="spread" class="scale-btn"><span>展开更多</span>
						<div class="icon"></div>
					</div>
					<div class="title">
						<div class="title-name">热搜</div>
					</div>
					<div class="hot-list">
						<div class="item hot"><span class="pre">1</span>鸠占鹊巢</div>
						<div class="item"><span class="pre">2</span>鸠占鹊巢</div>
						<div class="item hot"><span class="pre">3</span>我的英雄学院</div>
						<div class="item new"><span>4</span>鸠占鹊巢</div>
						<div class="item new"><span>5</span>鸠占鹊巢</div>
						<div class="item"><span>6</span>鸠占鹊巢</div>
						<div class="item new"><span>7</span>鸠占鹊巢</div>
						<div class="item"><span>8</span>鸠占鹊巢</div>
						<div class="item"><span>9</span>鸠占鹊巢</div>
						<div class="item"><span>10</span>鸠占鹊巢</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var inputEl = document.querySelector("input")
			var cardArea = document.querySelector("#cardArea")
			var searchMain = document.querySelector("#searchMain")
			var spreadBtn = document.querySelector("#spread")
			var spreadTxt = document.querySelector("#spread span")
			var grid = document.querySelector(".grid")
			var isSpread = false
			inputEl.onfocus = e => {
				cardArea.classList.remove("hide")
			}
			window.onclick = e => {
				cardArea.classList.add("hide")
			}
			searchMain.onclick = e => {
				e.stopPropagation()
			}
			spreadBtn.onclick = e => {
				if(isSpread){
					spreadTxt.innerText = "展开更多"
					grid.classList.add("limit")
					isSpread = false
				}else{
					spreadTxt.innerText = "收起"
					grid.classList.remove("limit")
					isSpread = true
				}
			}
			grid.onclick = e => {
				if(e.target.classList.contains("close")){
					e.target.parentElement.remove()
				}
			}
		</script>
	</body>
</html>
